<template>
  <div class="room-content" style="height: 100%">
    <a-card size="small" style="height: 100%">
      <!-- 备注信息 -->
      <a-descriptions title="备忘提醒">
        <template #extra>
          <a-button type="primary" ghost @click="onRemarkAdd">
            添加备忘
          </a-button>
        </template>
      </a-descriptions>
      <a-table
        :columns="columns"
        :pagination="false"
        rowKey="id"
        size="small"
        bordered
        :dataSource="remarkList"
      ></a-table>
    </a-card>

    <!-- 添加备注 -->
    <a-modal
      v-model:visible="remarkVisible"
      title="添加备忘"
      centered
      @ok="onRemarkAddSuccess"
    >
      <a-textarea
        v-model:value="remarkCont"
        placeholder="请输入备忘信息"
        :rows="4"
      />
    </a-modal>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs, watch } from "vue";
import TagList from "../../Tag/show.vue";
import request from "../../../common/utils/request";
import { message } from "ant-design-vue";
export default defineComponent({
  name: "RoomContent",
  components: { TagList },
  props: {
    // 房源详情
    detail: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      columns,
      remarkList: [],
      remarkVisible: false,
      remarkCont: "",
    });

    /** 添加备注 */
    const onRemarkAdd = () => {
      state.remarkCont = "";
      state.remarkVisible = true;
    };
    const onRemarkAddSuccess = () => {
      if (!state.remarkCont) {
        message.warning("请输入备注内容~");
        return;
      }
      request
        .post("/village", "/roomRemarks/add", {
          room_id: props.detail.id,
          village_id: props.detail.village_id,
          remark: state.remarkCont,
          needMsg: true,
        })
        .then((res) => {
          message.success(res.msg || "添加成功！");
          state.remarkVisible = false;
          getRemarkList();
        });
    };

    /** 获取备注列表 */
    const getRemarkList = () => {
      if (!props.detail.id) {
        return;
      }
      request
        .get("/village", "/roomRemarks/list", {
          room_id: props.detail.id,
          village_id: props.detail.village_id,
        })
        .then((res) => {
          state.remarkList = res.list;
        });
    };
    getRemarkList();

    watch(
      () => props.detail,
      () => {
        getRemarkList();
      }
    );
    return {
      ...toRefs(state),
      onRemarkAdd,
      onRemarkAddSuccess,
    };
  },
});

const columns = [
  {
    title: "内容",
    dataIndex: "remark",
    key: "remark",
  },
  {
    title: "操作人",
    dataIndex: "realname",
    key: "realname",
  },
  {
    title: "操作时间",
    dataIndex: "created_at",
    key: "created_at",
  },
];
</script>
